<!-- <template>
  <div style="padding: 20px">
    <h2>车辆坐标实时数据</h2>

    <div v-if="connected" style="color: green">✅ 已连接 WebSocket</div>
    <div v-else style="color: red">❌ 未连接 WebSocket</div>

    <button @click="openWebSocket" :disabled="connected">开启连接</button>
    <button @click="closeWebSocket" :disabled="!connected">关闭连接</button>

    <hr />

    <div v-if="messages.length === 0">暂未收到数据</div>

    <ul>
      <li v-for="(msg, index) in messages" :key="index">
        {{ formatMessage(msg) }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ws: null,
      connected: false,
      messages: []
    };
  },
  methods: {
    initWebSocket() {
      const wsUrl = 'ws://localhost:8080/websocket/carInfo';
      this.ws = new WebSocket(wsUrl);

      this.ws.onopen = () => {
        this.connected = true;
        console.log('WebSocket连接已打开');
      };

      this.ws.onmessage = (event) => {
        console.log('收到消息：', event.data);
        this.messages.push(event.data);
      };

      this.ws.onclose = () => {
        this.connected = false;
        console.log('WebSocket连接已关闭');
      };

      this.ws.onerror = (err) => {
        console.log('WebSocket连接异常：', err);
      };
    },

    openWebSocket() {
      if (!this.connected) {
        this.initWebSocket();
      }
    },

    closeWebSocket() {
      if (this.ws && this.connected) {
        this.ws.close();
      }
    },

    sendMessage(msg) {
      if (this.ws && this.connected) {
        this.ws.send(msg);
      } else {
        console.warn('WebSocket未连接，无法发送消息');
      }
    },

    formatMessage(msg) {
      try {
        const obj = JSON.parse(msg);
        if (obj.x !== undefined && obj.y !== undefined) {
          return `坐标：X=${obj.x}, Y=${obj.y}`;
        }
        return msg;
      } catch (e) {
        return msg;
      }
    }
  },
  mounted() {
    this.initWebSocket();
  },
  beforeDestroy() {
    if (this.ws) {
      this.ws.close();
    }
  }
};
</script> -->
<template>
  <div>
    <MapDemo />
  </div>
</template>

<script>
import MapDemo from '../components/Map/Map.vue';

export default {
  components: { MapDemo },
};
</script>
